<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <link href="./watchlog.css" rel="stylesheet" type="text/css" />
    </head>
    <script>
        // var url = "";
        var dircontent, filecontent, userid, output;

        function init() {
            dircontent = document.getElementById("dircontent");
            filecontent = document.getElementById("filecontent");
            output = document.getElementById("output");
            getUserId();
            logdirs();
        }

        function get(url, callback) {
            let xhr = new XMLHttpRequest();
            // methods：GET/POST请求方式等，url：请求地址，true异步（可为false同步）
            xhr.open("GET", url, true);
            xhr.send();// 发送
            xhr.onreadystatechange = function () { 
                if (xhr.readyState == 4 && xhr.status == 200) {   // 成功，接收到数据
                    var result = JSON.parse(xhr.response);
                    console.log(result);
                    callback(result.data);
                } else if (xhr.status == 404) {                  // 失败，页面未找到
                }else {
                    callback([]);
                }
            }
        }

        function getUserId() {
            get("./userid", function (u) {
                userid = u;
            });
        }

        function logdirs() {
            get("./logdirs", function (dirs) {
                dirs.forEach((d,index) => {
                    var span = document.createElement("span");
                    // span.style.wordWrap = "break-word";
                    // span.style.backgroundColor = "#AAA";  //所有浏览器都支持属性赋值
                    // span.style.styleFloat = "center"; // IE 所有
                    // span.style.border = "1px solid blue";
                    span.setAttribute('class','tabsItem') //tabsItem默认样式
                    span.innerHTML = d;
                    span.onclick = function () { showLogs(d,index) };
                    dircontent.appendChild(span);
                });

            });
        }


        function showLogs(serviceName,index) {
            var tabsItemArr = document.getElementsByClassName('tabsItem')
            for(let i = 0; i < tabsItemArr.length; i ++) {
                tabsItemArr[i].classList.remove('tabsItemActive')
            }
            tabsItemArr[index].classList.add('tabsItemActive')//选中
            filecontent.innerHTML = "";
            var idconsole = document.getElementById('console')
            if (serviceName == "iscript") {
                idconsole.style.height = 'calc(100% - 147px)'
                var key = "$" + serviceName + "$" + userid + ".log";
                createConsoleDiv(key);
            }
            else {
                idconsole.style.height = ''
                get("./" + serviceName + "/instance", function (logs) {
                    logs.forEach((instanceId,inx) => {
                        var key = "$" + serviceName + "$" + instanceId;
                        var span = document.createElement("span");
                        // span.style.wordWrap = "break-word";
                        // span.style.backgroundColor = "#DDD";  //所有浏览器都支持属性赋值
                        // span.style.styleFloat = "center"; // IE 所有
                        // span.style.border = "1px solid blue";
                        span.setAttribute('class','ipItem') //ipItem默认样式
                        span.innerHTML = instanceId;
                        span.onclick = function () { createConsoleDiv(key,inx) };
                        filecontent.appendChild(span);

                    });
                });
            }

        }

        function createConsoleDiv(key,inx) {
            var ipItemArr = document.getElementsByClassName('ipItem')
            for(let i = 0; i < ipItemArr.length; i ++) {
                ipItemArr[i].classList.remove('ipItemActive')
            }
            if(ipItemArr && ipItemArr.length > 0) {
                ipItemArr[inx].classList.add('ipItemActive')//选中
            }
            var div = document.getElementById(key);
            var arr = document.getElementsByClassName("active");
            for(var i=0;i<arr.length; i++) arr[i].className = "inactive";

            if (!div) {
                div = document.createElement("div");
                div.setAttribute("id", key);
                div.style.wordWrap = "break-word";
                div.style.backgroundColor = "#555";  //所有浏览器都支持属性赋值
                // div.style.border = "1px solid blue";
                div.className = "active";

                var output = document.getElementById("output");
                output.appendChild(div);

                var websocket = connWebSocket(key);
            }
            div.className = "active";
        }

        function connWebSocket(key) {
            var consoleDiv = document.getElementById(key);
            var host = window.location.host;
            var wsUri = "ws:" + host + "/manager/websocket/" + key;
            var websocket = new WebSocket(wsUri);
            websocket.onopen = function (evt) {
                writeToScreen("CONNECTED");
                doSend("WebSocket rocks");
            };
            websocket.onclose = function (evt) {
                writeToScreen("DISCONNECTED");
            };
            websocket.onmessage = function (evt) {
                writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>');
            };
            websocket.onerror = function (evt) {
                writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
            };

            function doSend(message) {
                writeToScreen("SENT: " + message);
                websocket.send(message);
            }

            function writeToScreen(message) {
                var pre = document.createElement("p");
                pre.style.wordWrap = "break-word";
                pre.innerHTML = message;
                consoleDiv.appendChild(pre);
            }
            return websocket;

        }

        window.addEventListener("load", init, false); 
    </script>

    <body>
        <div class="serverLog">
            <div class="title">服务器日志</div>
            <div id="dircontent"></div>
            <div id="filecontent"></div>
            <div id="console">
                <div id="output"></div>
            </div>
        </div>
    </body>

</html>